<template>
    <div class="enrollBox">
        <router-link :to="{path:'/pwdlogin'}">
            <van-icon name="arrow-left"  style="font-size: 30px;"/>
        </router-link>
        <h1>注册账号</h1>
        <div class="content">
            <!-- 输入任意文本 -->
            <van-field v-model="user" label="账号："  class="inputbox" placeholder="请输入账号" type="text"/>
            <van-field v-model="nickname" label="昵称："  class="inputbox" placeholder="请输入昵称"/>
            <!-- 输入密码 -->
            <van-field v-model="password" type="password" label="密码:"  class="inputbox" placeholder="请输入密码"/>
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field v-model="tel" type="tel" label="手机号:" class="inputbox"  placeholder="请输入手机号"/>
            <van-field
                    v-model="code"
                    center
                    clearable
                    label="验证码:"
                    placeholder="请输入短信验证码"
                    class="inputbox"
            >
                <template #button>
                    <van-button size="small" type="primary" @click="getCode1" ref="disable" :disabled="idDisable" class="getCode">{{message}}</van-button>
                </template>
            </van-field>
            <van-field name="radio" label="性别：" class="inputbox">
                <template #input>
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="0">男</van-radio>
                        <van-radio name="1">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-model="introduction" label="个人简介："  class="inputbox" type="text" placeholder="请输入个人简介"/>
            <van-button type="info" class="enroll" @click="getEnroll">注册</van-button>
            <router-link :to="{path:'/pwdlogin'}">
                <span style="color: blue">去登录</span>
            </router-link>
        </div>
    </div>
</template>

<script>
    let timer;
    var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    import {enrollList, getCode} from "../api/api";
    import {Notify, Toast} from "vant";
    // import * as Dialog from "vant";
    // import * as Dialog from "vant";
    import { Dialog } from 'vant';
    export default {
        name: "Enroll",
        data() {
            return {
                nickname:'',
                radio: '0',
                code:'',
                tel: '',
                user: '',
                password: '',
                introduction:'',
                message:'发送验证码',
                idDisable:false,
                number:60

            };
        },
        methods:{
            //剩余时间
            remainder(){
                timer = setInterval( () => {
                    this.number--
                    this.message = this.number
                    if(this.number == 0){
                        clearInterval(timer)
                        this.idDisable = false
                        this.message = "发送验证码"
                    }
                },1000)
            },
            getCode1(){
                const getCode1Toast = Toast.loading({
                    duration:0,
                    message: '请稍后...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                if(this.tel==''){
                    getCode1Toast.clear()
                    Dialog.alert({
                        message:"请输入手机号!",
                        theme: 'round-button',
                    }).then(() => {
                    });
                }else if(reg.test(this.tel)){
                    //    短信验证码
                    getCode(this.tel).then(res=>{
                        console.log(res)
                        if(res.data.code==0){
                            this.idDisable = true

                            this.remainder()

                            getCode1Toast.clear()
                            Notify({
                                message: '验证码已发送，请注意查收！',
                                color: '#ad0000',
                                background: '#ffe1e1',
                                height:'100px'
                            });
                        }else {
                            getCode1Toast.clear()
                            Notify({ type: 'primary', message: res.data.msg });
                        }
                        this.$refs.disable.style.disabled=true;
                    })
                }else{
                    getCode1Toast.clear()
                    Dialog.alert({
                        message:"请输入正确格式的手机号！",
                        theme: 'round-button',
                    }).then(() => {
                    });
                }

            },
            //注册
            getEnroll(){
                const getEnrollToast = Toast.loading({
                    duration:0,
                    message: '请稍后...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                if(this.user=='' && this.code==''&& this.tel==''&&this.password==''&&this.nickname==''&&this.introduction==''){
                    getEnrollToast.clear()
                    Dialog.alert({
                        message: '全部内容不能为空',
                        theme: 'round-button',
                    }).then(() => {
                        // on close
                    });
                }else{
                    getEnrollToast.clear()
                    enrollList(this.user,this.code,this.tel,this.password,this.nickname,this.radio,this.introduction).then(res=>{
                        if(res.data.code==0){
                            Dialog.alert({
                                message: res.data.msg,
                                theme: 'round-button',
                            }).then(() => {
                                // on close
                                this.$router.push('/pwdlogin')
                            });
                        }else {
                            Dialog.alert({
                                message: res.data.msg,
                                theme: 'round-button',
                            }).then(() => {
                            });
                        }
                    })
                }

            }
        },
        created() {

        }

    }
</script>

<style scoped>
    .enrollBox {
        padding: 20px;
    }
    h1{
        margin-top: 40px;
        text-align: center;
    }
    .content {
        width: 98%;
        margin: auto;
        margin-top: 20px;

    }
    .inputbox {

        margin-bottom: 20px;
        /*background-color: darkgrey;*/
        border: 1px solid black;
        font-size: 15px !important;
        border-radius: 10px;
    }
    .enroll {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    /deep/.van-notify {
        padding: 25px 20px;
    }
    /deep/.van-field__label {
        margin-right: 0 !important;
        width: 5em;
    }
>>>.getCode{
    width: 80px;
    text-align: center;
}
</style>